<template>
  <div class="add-new-address">
    <el-dialog
      v-model="newAddressVisible"
      title="添加收货地址"
      width="500"
      :before-close="handleClose"
    >
      <el-form label-width="auto" style="width: 350px" :model="addressInfo" :rules="rules">
        <!-- 收货人名称 -->
        <el-form-item label="收货人名称" prop="name">
          <el-input
            v-model="addressInfo.name"
            placeholder="在这里填写收货人的名称"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <!-- 设置预留电话 -->
        <el-form-item label="预留电话" prop="phone">
          <el-input
            v-model="addressInfo.phone"
            placeholder="在这里填写预留电话"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <!-- 设置收获地址 -->
        <el-form-item label="收货地址" prop="address">
          <el-input
            v-model="addressInfo.address"
            placeholder="在这里填写收货地址"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-popconfirm title="填入注册地址" @confirm="getUserAddress">
            <template #reference>
              <el-button type="primary" :icon="Edit" circle />
            </template>
          </el-popconfirm>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="addAddress">新增</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { addNewAddress, getCurrentAddress } from '@/api/shop'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { startLoading, stopLoading } from '@/utils/loading'
import { ElNotification } from 'element-plus'

// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
    { min: 1, max: 10, message: '标题字数为1~20字之间', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' },
    {
      pattern: /^\+?[1-9]\d{1,14}(\(\d{1,3}\)|\s?\d{1,3})?[-.\s]?\d{1,14}$/,
      message: '请按照正确的格式输入手机号',
      trigger: 'blur',
    },
  ],
  address: [
    { required: true, message: '请输入正文内容', trigger: 'blur' },
    { min: 1, max: 100, message: '标题字数为1~500字之间', trigger: 'blur' },
  ],
}

const emit = defineEmits(['close'])

const userStore = useUserStore()

const newAddressVisible = ref(true)

// 地址信息
const addressInfo = ref({
  username: '',
  phone: '',
  address: '',
})

// 添加地址
const addAddress = async () => {
  startLoading()
  const res = (await addNewAddress({ ...addressInfo.value, userId: userStore.getUser() })).data
  stopLoading()
  if (res.success) {
    ElNotification({
      title: '成功',
      message: '新增收货地址成功',
      type: 'success',
    })
    emit('close')
  } else {
    ElNotification({
      title: '提示',
      message: '收货地址最多只能存在3个',
      type: 'warning',
    })
  }
}

// 自动补全地址
const getUserAddress = async () => {
  startLoading()
  const { data } = (await getCurrentAddress()).data
  stopLoading()
  addressInfo.value = data
}

// 关闭弹窗
const handleClose = () => {
  emit('close')
}
</script>

<style scoped less="scss"></style>
